<template>
	<scroll-view class="main">
		<view class="maskClass" v-show="showMask">
		    <view v-show="showMask" style="width:80%; background-color: #fff;padding: 15px;border-radius: 15rpx; margin: 60% auto; z-index: 1;">
				<!-- <view style="width:100%;height: fit-content;">
					<view style="text-align:center;margin-top: 25rpx;">
						<text style="padding: 35rpx; font-size:35rpx; font-weight:700; text-align:center;margin-bottom: 25rpx;" >	个人信息 </text>
					</view>
					<view style="text-align: center;">
						
						 <text style="color: darkgray;margin-top:25rpx;margin-bottom: 25rpx;">{{rencaiDetail.graduateInstitutions}}</text> -->
						<!--<view class="service-info">
							<text>{{rencaiDetail.synopsis}}</text>
						</view>
					</view>
				</view> -->
				<view style="width:100%;text-align: center;">
					<!-- <view style="padding: 15rpx; margin: 15rpx auto; font-size:35rpx; font-weight:700; text-align:center">
						<text >请完善预约信息 </text>
					</view>
					<view class="devideline"></view>
					<view class="login_from_input">
						<view class="form-left">预约时间</view>
						<view class="login_from_fun">
							<picker style="width: 100%;" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
								<view style="font-size: 32rpx; float:left;">{{ date || '请选择预约时间' }}</view>
							</picker>
						</view>
					</view>
					<view class="login_from_input">
						<view class="form-left">联系电话</view>
						<view class="login_from_fun"><input type="number" maxlength="11" v-model="askInfo.userPhone" placeholder="请输入联系电话"></view>
					</view> -->
					<view class="login_from_input">
						<view class="form-left">咨询内容</view>
						<view class="login_from_fun">
							<textarea style="height:180rpx; text-align: left;" type="number" v-model="askInfo.content" placeholder="请输入预约内容"></textarea> 
						</view>
					</view>
					
				</view>
				<view class="submit_view">
					<button type="primary" class="submit" @click="submitAsk()">提交</button>
					<button type="warn" class="canncle" @click="closePopup()">取消</button>
				</view>
		    </view>
		</view>
		<view class="top">
			<image class="rencai_photo" :src="rencaiDetail.image"></image>
			<view class="info">
				<view>
					<text>姓名：{{rencaiDetail.name}}</text>
				</view>
				<view>
					<text>出生年月:{{rencaiDetail.birthdate}}</text>
				</view>
				<view>
					<text v-if="rencaiDetail.education">学历：{{rencaiDetail.education}}</text>
					<text v-else>学历：暂无</text>
				</view>	
				<view>
					<text>归属单位：{{rencaiDetail.organization}}</text>
				</view>	
				<button style="margin-right: 15rpx; width: 100px;text-align: center;margin-top: 15rpx;float: right;" type="primary" size="mini" @click="toggle1('center')">咨询</button>
			</view>
		</view>
		<view style="height: 15rpx;background-color: #fff;"></view>
		<scroll-view class="bottom">
			<view>
				<text>个人简介</text>
			</view>
			<view v-if="rencaiDetail.undertakingProject" style="margin-top:20rpx;">
				<text>
					{{rencaiDetail.undertakingProject}}
				</text>
			</view>
			<view v-else>
				<text>暂无数据</text>
			</view>
			
			<view v-if="rencaiDetail.synopsis" style="margin-top:20rpx;">
				<text>
					{{rencaiDetail.synopsis}}
				</text>
			</view>
			<view v-else>
				<text>暂无数据</text>
			</view>
			
			<view v-if="rencaiDetail.workExperience" style="margin-top:20rpx;">
				<text>
					{{rencaiDetail.workExperience}}
				</text>
			</view>
			<view v-else>
				<text>暂无数据</text>
			</view>
		</scroll-view>
		
	</scroll-view>
</template>

<script>
	import env from '@/utils/env.js'
	import mpHtml from "@/components/mp-html/components/mp-html/mp-html.vue"
	import {
		useStore
	} from "vuex";
	import *  as techPerson from "@/api/source/kjrc/TECH_PERSON.js";
	import *  as consult from "@/api/ask/ask.js"
	import *  as techManager from "@/api/source/kjrc/KJJJR.js";
	import *  as newTeam from "@/api/source/kjrc/XSCDW.js";
	import *  as newYounger from "@/api/source/kjrc/QNXXTJB.js";
	import *  as enginner from "@/api/source/kjrc/ENGINNER.js";
	import * as dict from '@/api/system/dict/data.js'
	
	function getDate(type) {
		const date = new Date();
	 
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
	 
		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
	 
		return `${year}-${month}-${day}`;
	}
	
	import {
		defineComponent
	} from "vue";
	export default {
		data() {
			return {
				title: '',
				rencaiDetail:{},
				content:'',
				educationList:[
					{value:'',dictLabel:''}],
				memberType: 'top',
				askInfo:{
						content: '',
						laboratoryname: '',
						recipientId: '',
						recipientName: '',
						recipientTel:'',
						relationId:'',
						type:'1'
				},
				showMask:false,
				//截止时间选择相关
				date: getDate({
					format: true
				}),
				startDate: getDate('start'),
				endDate: getDate('end'),
				canlendarShow:false,
			}
		},
		onLoad(option) { 
			this.getDicts()
			this.getRencaiDetail(option.id);
		},
		methods:{
			getUser(){
				var value = uni.getStorageSync('userInfo') || []
				if(value.login_user == null){
					uni.showToast({
						icon:'none',
						title:'请先登录！'
					})
					uni.navigateTo({
						url:'/subpages/pages/register/login_province'
					})
					this.showMask = false
				}else{
					// this.orderInfo.userName = value.login_user.member.username
					// this.orderInfo.userId = value.login_user.member.id
					this.askInfo.userName = value.login_user.member.userName
					this.askInfo.userId = value.login_user.member.id
				}
			},
			getDicts(){
				dict.getDicts("person_education").then((res)=>{
					this.educationList = res.data
				})
			},
			toggle1(type) {
			    // this.type = type;
			    // this.$refs['memberPopup'].open();
				this.showMask = true
				this.getUser()
			},
			closePopup(){
				this.showMask = false
			},
			getRencaiDetail(id){
				techPerson.getTECH_PERSON(id).then((res)=>{
					this.rencaiDetail = res.data
					this.rencaiDetail.image = `${env.imgUrl}` + this.rencaiDetail.image
				})
			},
			submitAsk(){
				let _this = this
				if(this.askInfo.content == '' || this.askInfo.content == ''){
					uni.showToast({
						icon:"none",
						title:"请输入预约内容！"
					})
				}else{
					this.askInfo.type = '1'
					this.askInfo.relationId = this.rencaiDetail.id
					this.askInfo.recipientName = this.rencaiDetail.name
					this.askInfo.recipientTel = this.rencaiDetail.mobileTelephone
					consult.addMyAsk(this.askInfo).then((res)=>{
						if(res.code == 200){
							uni.showToast({
								icon:'success',
								title:'提交成功！'
							})
						}else{
							uni.showToast({
								icon:'success',
								title:'提交失败，请重试！'
							})
						}
						this.showMask = false
					})
					
				}
			},
			changeDate(e){
				this.canlendarShow = false;
				var year =  e.year 
				var month = e.month
				if(month < 10){
					month = "0" + month
				}
				var day = e.day
				if(day < 10){
					day = "0" + month
				}
				
				this.askInfo.date = year + '-' + month + '-' + day
			},
		}
	}
</script>

<style>
	
	.main{
		padding: 25rpx 25rpx;
		background-color: #fff;
	}
	
	.rencai_photo {
		width: 38%;
		height: 300rpx;
		float: left;
		margin-top: 15rpx;
	}
	
	.info{
		width: 60%;
		hieght:330rpx;
		float: right;
		margin-top: 15rpx;
	}
	
	.top{
		height: 330rpx;
		width: 89%;
		margin-right: 25rpx;
		background-color: #fff;
		border-radius: 15rpx;
		padding: 15rpx;
		border: #016fb8 solid 1rpx;
	}
	
	.info text{
		line-height: 60rpx;
	}
	
	.bottom {
		height:fit-content;
		width: 89%;
		line-height: 50rpx;
		margin-top: 45rpx;
		background-color: #fff;
		border-radius: 15rpx;
		padding: 15rpx;
		border: #016fb8 solid 1rpx;
	}
	
	.uni-form-item {
		margin: 60rpx 30rpx;
		border-radius: 50px;
		}
		
	.uni-form-item button{
		background-color: #016fb8;
		height: 70rpx;
		font-size: 28rpx;
		margin-top: 20rpx;
	}
	
	.login_from_input{
		width: 100%; 
		height:auto; 
		display: flex; 
		flex-direction: row; 
		justify-content: space-between; 
		align-items: center; 
		border-bottom: 1px #eee solid; 
		padding: 20upx 0px; 
		margin: 0px auto; 
		background-color: #fff;
	} 
	
	.login_from_name{
		width: 30%; 
		margin-left: 40rpx;
		font-size: 30rpx;
	}
	.login_from_fun{ 
		width: 70%; 
		display: flex; 
		flex-direction: row; 
		justify-content: flex-end; 
		text-align: right; 
		margin-left: 25rpx;
	}
	
	.login_from_fun input{ 
		width: 100%; 
		text-align: left; 
		font-size: 14px;  
	}
	
	/deep/ .uni-popup .uni-popup__wrapper {
	    width: 70% !important;
		margin: 0 auto;
	}
	
	.service-range {
		height: 350rpx;
		margin-top:15rpx;
		background-color: #fff;
		padding: 25rpx;
		text-align: center;
	}
	
	.devideline {
		float: left; 
		height: 0.3rpx;
		width:100%;
		background-color: #eeeeee;
		margin-top: 15rpx;
		margin-bottom: 15rpx;
	}
	
	.maskClass {
		position:fixed;
		bottom:0;
		top:0;
		left:0;
		right:0;
		background-color:rgba(0, 0, 0, 0.5);
		z-index: 2;
	}
		
		.submit_view {
			height: 90rpx;
		}
			
		.submit_view .submit{
			background-color: #016fb8;
			height: 70rpx;
			width: 40%;
			font-size: 28rpx;
			margin-top: 20rpx;
			float: left;
		}
		.submit_view .canncle{
			background-color: darkgray;
			height: 70rpx;
			width: 40%;
			font-size: 28rpx;
			margin-top: 20rpx;
			float: right;
		}
</style>